<template>
  <div class="container">
    <div class="singer">
      <div class="singer_aside">
        <div class="filter">
          <ul class="filter_item">
            <li class="filter_title">推荐</li>
            <li
              class="item_nav"
              :class="{ active: isShowTopArtists }"
              @click="getToptArtists"
            >
              <span class="iconline">-</span>
              推荐歌手
            </li>
          </ul>
          <ul
            class="filter_item"
            :class="{ no_border: index === 4 }"
            v-for="(area, index) in artistCategoryInfo.area"
            :key="index"
          >
            <li class="filter_title">
              {{ area.label }}
            </li>
            <li
              v-for="(type, idx) in artistCategoryInfo.type"
              :key="idx"
              class="item_nav"
              :class="{
                active:
                  !isShowTopArtists &&
                  area.val === artistCategoryInfo.params.area &&
                  type.val === artistCategoryInfo.params.type,
              }"
              @click="
                selectSingerByTypeAndArea(area as any, type as any, index, idx)
              "
            >
              <i class="iconline">-</i>
              <a ref="#">{{ ` ${area.label}${type.label}` }}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="singer_container" v-if="!isShowTopArtists">
        <div class="singer_header">
          <div class="header_title">
            {{ renderTitle() }}
          </div>
          <ul class="header_search_hot">
            <li
              class="search_nav"
              v-for="(item, index) in artistCategoryInfo.initial"
              :key="index"
              :class="{
                active: index === artistCategoryInfo.initialIndex,
                search_hot: index === 0,
                search_other: item.val === '0',
              }"
            >
              <a href="#" @click="selectByInitial(index)">{{ item.label }}</a>
            </li>
          </ul>
        </div>

        <div class="singer_wrap">
          <div class="singer_item_wrap">
            <div
              class="singer_item"
              v-for="item in artistCategoryInfo.singerList"
            >
              <SingerItem :item="item" />
            </div>
          </div>
        </div>
      </div>
      <div class="singer_container" v-else>
        <div class="topSinger_header">
          <span class="topSinger_title">热门歌手</span>
          <span ref="more" class="showMore" @click="getMoreHotSingers"
            >更多 ></span
          >
        </div>
        <div class="singer_wrap">
          <div class="singer_item_wrap" v-if="!isShowTopArtists">
            <div
              class="singer_item"
              v-for="item in artistCategoryInfo.singerList"
            >
              <SingerItem :item="item" />
            </div>
          </div>
          <div class="singer_item_wrap" v-else>
            <div
              class="singer_item"
              v-for="item in artistCategoryInfo.singerList"
            >
              <SingerItem :item="item" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'XSinger',
}
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { GetArtistCategoryInfoItem } from '@/api/modules/singerModel'
import { reqArtistList, reqTopArtists } from '@/api/singer'
import SingerItem from './Components/SingerItem.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

const more = ref()
// 左侧歌手分类导航数据
const artistCategoryInfo = ref<GetArtistCategoryInfoItem>({
  type: [
    // { label: '全部', val: -1 },
    { label: '男歌手', val: 1 },
    { label: '女歌手', val: 2 },
    { label: '乐队', val: 3 },
  ],
  area: [
    // { label: '全部', val: -1 },
    { label: '华语', val: 7 },
    { label: '欧美', val: 96 },
    { label: '日本', val: 8 },
    { label: '韩国', val: 16 },
    { label: '其他', val: 0 },
  ],
  initial: [{ label: '热门', val: '-1' }],
  typeIndex: 0,
  areaIndex: 0,
  initialIndex: 0,
  params: {
    area: '7',
    type: '1',
    initial: '',
    limit: 30,
    offset: 0,
  },
  singerList: [],
})
// 热门及首字母搜索的数据
const newInitial = () => {
  for (let i = 0; i < 26; i++) {
    // artistCategoryInfo.initial.value.push({
    //   label: String.fromCharCode(65 + i), // ABCDE
    //   val: String.fromCharCode(97 + i), // abcde
    // })
    artistCategoryInfo.value.initial.push({
      label: String.fromCharCode(65 + i), // ABCDE
      val: String.fromCharCode(97 + i), // abcde
    })
  }
  artistCategoryInfo.value.initial.push({
    label: '其他',
    val: '0',
  })
}
// 请求歌手列表数据
const getArtistList = async () => {
  const res = await reqArtistList(artistCategoryInfo.value.params)
  artistCategoryInfo.value.singerList = res.artists
  isShowTopArtists.value = false
  // console.log(artistCategoryInfo.value.singerList)
}

// 显示推荐歌手数据
const isShowTopArtists = ref(true)
// 请求推荐歌手数据
const getToptArtists = async () => {
  const res = await reqTopArtists({ limit: 15, offset: 0 })
  isShowTopArtists.value = true
  artistCategoryInfo.value.singerList = res.artists
  more.value.style.display = 'inline'
  // console.log(res.artists)
}
// 请求更多热门歌手数据
const getMoreHotSingers = async () => {
  const res = await reqTopArtists({ limit: 250, offset: 0 })
  isShowTopArtists.value = true
  artistCategoryInfo.value.singerList = res.artists
  more.value.style.display = 'none'
}
// 上来就加载
onMounted(() => {
  newInitial()
  getToptArtists()
  // getArtistList()
})

// 点击热门和首字母搜索条件
const selectByInitial = (index: number) => {
  artistCategoryInfo.value.initialIndex = index
  artistCategoryInfo.value.params.initial = artistCategoryInfo.value.initial[
    index
  ].val as string
  artistCategoryInfo.value.params.offset = 0
  getArtistList()
}
// 点击左侧导航搜索
const selectSingerByTypeAndArea = (
  area: string,
  type: string,
  index: number,
  idx: number
) => {
  // console.log(area, type)
  artistCategoryInfo.value.areaIndex = index
  artistCategoryInfo.value.typeIndex = idx

  artistCategoryInfo.value.params.type = artistCategoryInfo.value.type[idx]
    .val as string
  artistCategoryInfo.value.params.area = artistCategoryInfo.value.area[index]
    .val as string

  artistCategoryInfo.value.params.offset = 0
  getArtistList()
}
// 头部标题显示
const renderTitle = () => {
  let areaArr = []
  let typeArr = []
  areaArr = artistCategoryInfo.value.area.filter(
    (item) => item.val == artistCategoryInfo.value.params.area
  )
  typeArr = artistCategoryInfo.value.type.filter(
    (item) => item.val == artistCategoryInfo.value.params.type
  )
  return `${areaArr[0].label}${typeArr[0].label}`
}
</script>

<style scoped lang="less">
.container {
  box-sizing: border-box;
  min-height: 780px;
  .singer {
    width: 980px;
    margin: 0 auto;
    border: 1px solid #d3d3d3;
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .singer_aside {
      width: 180px;
      padding-top: 20px;
      border-right: 1px solid #d3d3d3;
      .filter {
        .filter_item {
          width: 160px;
          margin: 0 auto;
          padding: 10px 0;
          border-bottom: 1px solid #d3d3d3;
          .filter_title {
            width: 100%;
            height: 25px;
            padding-left: 14px;
            font-size: 16px;
            color: #d3d3d3;
          }
          .item_nav {
            height: 29px;
            line-height: 29px;
            color: #333;
            font-size: 12px;
            &:hover {
              cursor: pointer;
              text-decoration: underline;
            }
            .iconline {
              display: inline-block;
              width: 27px;
              text-align: center;
            }
          }
          .active {
            text-decoration: none;
            color: #c20c0c;
          }
        }
        .no_border {
          border: none;
        }
      }
    }
    .singer_container {
      width: 799px;
      padding: 40px;

      .singer_header,
      .topSinger_header {
        width: 719px;
        margin: 0 auto;
        .header_title {
          width: 719px;
          height: 42px;
          line-height: 42px;
          font-size: 24px;
          color: #333;
          border-bottom: 2px solid red;
        }
        .header_search_hot {
          width: 719px;
          height: 24px;
          display: flex;
          justify-content: left;
          align-items: center;
          margin: 20px 0;
          li {
            margin-left: 3px;
            text-align: center;
            align-content: center;
            a {
              display: inline-block;
              width: 21px;
              font-size: 14px;
              height: 24px;
              line-height: 24px;
              text-align: center;
              color: #333;
              &:hover {
                text-decoration: underline;
                transform: scale(1.4);
              }
            }
          }
          .active {
            width: 21px;
            background: #c20c0c;
            a {
              width: 21px;
              font-size: 12px;
              border-radius: 2px;
              color: #fff;
              &:hover {
                transform: scale(1);
              }
            }
          }
          li:first-child.active {
            width: 45px;
            margin-left: 0;
            background: #c20c0c;
            a {
              width: 45px;
              font-size: 12px;
              border-radius: 2px;
              color: #fff;
            }
          }
          .search_other,
          .search_hot {
            width: 45px;
            margin-left: 0;
            a {
              width: 45px;
              font-size: 12px;
            }
          }
        }
      }
      .topSinger_header {
        width: 719px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid red;
        .topSinger_title {
          height: 42px;
          line-height: 42px;
          font-size: 24px;
          color: #333;
        }
        .showMore {
          display: inline-block;
          color: #666;
          font-size: 12px;
          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
      }

      .singer_wrap {
        position: relative;
        width: 719px;
        overflow: hidden;
        margin: 0 auto;

        .singer_item_wrap {
          width: 800px;
          position: relative;
          left: 0;
          top: 0;
          display: flex;
          justify-content: left;
          align-items: center;
          flex-wrap: wrap;
        }
      }
    }
  }
}
</style>
